import React from 'react';

import {
  View, StyleSheet, Text, Dimensions,
} from 'react-native';
import _ from 'lodash';

const deviceWidth = Dimensions.get('window').width;

export default ({ datas, _click }) => (
  <View style={styles.itemButtonContainer}>
    {
      _.map(datas, (data, index) => (
        <Text
          key={index}
          style={[styles._button, { backgroundColor: data.checked ? '#207aff' : 'transparent', borderColor: data.checked ? '#207aff' : 'rgba(219,219,219,0.52)' }]}
          onPress={() => _click(data)}
        >
          {data.name}
        </Text>
      ))
    }
  </View>
);

const styles = StyleSheet.create({
  itemButtonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  _button: {
    width: (deviceWidth - 56) / 4,
    borderRadius: 2,
    textAlignVertical: 'center',
    padding: 5,
    margin: 5,
    color: 'white',
    textAlign: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
  },
});
